import React from 'react';
import { Toast } from 'antd-mobile'
import { connect } from 'react-redux';

import { getCheckSecurity } from '../common/service'
import { saveData } from '../action/UserAction'
import NoPowerShow from '../component/NoPowerShow'

class SetSecurityCheck extends React.Component {
	constructor(props){
		super(props)
		this.state = {
			carNum: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.vehicleNum : '',
			equipmentArr: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.deviceIds : [],
			numPersonal: this.props.userReducer.step.planInfoRes ? this.props.userReducer.step.planInfoRes.personNum : '',
		}
	}

	commitConfirm() {
		const { showLoadModal, hideLoadModal } = this.props;
		showLoadModal();
		getCheckSecurity(this.props.userReducer.flowId) //流程id
		.then((data) => {
			const isOK = data.data;
			console.log(isOK);
			hideLoadModal();
			if (isOK.success) {
				this.props.dispatch(saveData(isOK.obj));
				this.props.currentPage(isOK.obj.flowBaseInfo.flowProcesses);
			} else {
				Toast.info(isOK.msg, 2);
			}
		})
		.catch((e) => {
			hideLoadModal();
			Toast.info('服务器异常', 2);
		})
	}
	
	render() {
		//判断是不是当前节点
		if (this.props.currentObj.flowId !== 7 || -1 === this.props.userReducer.roles.findIndex((value) => value === 63)) {
			return (<NoPowerShow id={this.props.currentObj.flowId}></NoPowerShow>);
		}
		const {carNum, equipmentArr, numPersonal} = this.state;
		return (
			<div style={{padding: '1.42rem 0.2rem 0rem 0.2rem'}}>
				<span className='num-title'>车辆数量</span>
				<span style={{fontSize: '0.32rem',color: '#0e8dea'}}>{carNum}</span>
				<span className='equipment-title'>设备</span>
				{equipmentArr.map((data, index) => {
					return (
						<div style={{paddingLeft: '0.15rem', marginBottom: '0.2rem'}} key={index}>
							<span style={{fontSize: '0.32rem',marginRight:'0.4rem', color: '#ccc'}}>{data.commonName}</span>
							<span style={{fontSize: '0.32rem',color: '#0e8dea'}}>{data.commonNum}</span>
						</div>
					);
				})}
				<div style={{marginTop: '0.6rem'}}>
					<span className='num-title'>人员数量</span>
					<span style={{fontSize: '0.32rem',color: '#0e8dea'}}>{numPersonal}</span>
				</div>
				{-1 === this.props.userReducer.roles.findIndex((value) => value === 64) || !this.props.isTodayStep()? null :
					<div 
						id='SecurityCheckbuttons'
						className='SecurityCheckBtn'
						onTouchStart={()=>{document.getElementById('SecurityCheckbuttons').style.backgroundColor = '#D97442'}}
						onTouchEnd={()=>{document.getElementById('SecurityCheckbuttons').style.backgroundColor = '#FFA24A'}}
						onClick={()=>{
							this.commitConfirm()
						}}
						>
						确认完毕
					</div>
				}
			</div>
		);
	}
}


function mapStateToProps(state) {
  const { userReducer } = state;
  return {
    userReducer
  };
}

export default connect(mapStateToProps)(SetSecurityCheck);